<template>
  <div class="main-content">
    <div class="settings">
      <div class="container">
        <div class="item">
          <div class="left">
            <div class="title"> 语言 </div>
          </div>
          <div class="right">
            <select  @click="toggle1"  :class="[colorStyle]">
              <option value="en">English</option>
              <option value="tr">Türkçe</option>
              <option value="zh-CN">简体中文</option>
            </select>
          </div>
        </div>
        <div class="item">
          <div class="left">
            <div class="title"> 外观 </div>
          </div>
          <div class="right">
            <select @click="toggle2"  :class="[colorStyle]">
              <option value="auto">自动</option>
              <option value="light">浅色</option>
              <option value="dark">深色</option>
            </select>
          </div>
        </div>
        <h3>音质</h3>
        <div class="item">
          <div class="left">
            <div class="title"> 音质选择 </div>
          </div>
          <div class="right">
            <select  @click="toggle3"  :class="[colorStyle]">
              <option value="128000"> 普通 - 128Kbps </option>
              <option value="192000"> 较高 - 192Kbps </option>
              <option value="320000"> 极高 - 320Kbps </option>
              <option value="999000"> 无损 - FLAC </option>
            </select>
          </div>
        </div>
        <h3>第三方</h3>
        <div class="item">
          <div class="left">
            <div class="title"> 连接 Last.fm </div>
          </div>
          <div   class="right">
            <button  > 授权连接 </button>
          </div>
        </div>
        <div   class="item">
          <div   class="left">
            <div   class="title">启用
              <a   href="https://github.com/nondanee/UnblockNeteaseMusic" target="blank">UnblockNeteaseMusic</a>
            </div>
          </div>
          <div   class="right">
            <div   class="toggle">
              <input   id="enable-unblock-netease-music" type="checkbox" name="enable-unblock-netease-music">
              <label   for="enable-unblock-netease-music"></label>
            </div>
          </div>
        </div>
        <div   class="item">
          <div   class="left">
            <div   class="title"> 启动后显示音乐库</div>
          </div>
          <div   class="right">
            <div   class="toggle">
              <input   id="show-library-default" type="checkbox" name="show-library-default">
              <label   for="show-library-default"></label>
            </div>
          </div>
        </div>
        <div   class="item">
          <div   class="left">
            <div   class="title"> 首页显示来自 Apple Music 的歌单</div>
            </div>
            <div   class="right">
              <div   class="toggle">
                <input   id="show-playlists-by-apple-music" type="checkbox" name="show-playlists-by-apple-music">
                <label   for="show-playlists-by-apple-music"></label>
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'PlaymusicSetting',
  data() {
    return {
      color1: 'black',
      color2: 'black',
      color3: 'black',
      colorStyle: '',
    };
  },
  methods: {
    toggle1() {
      this.color1 = '#335eea';
    },
    toggle2() {
      this.color2 = '#335eea';
    },
    toggle3() {
      this.color3 = '#335eea';
    },
  },
};
</script>

<style lang="scss" scoped>
a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.settings{
    display: flex;
    justify-content: center;
}
.container{
    margin-top: 24px;
    width: 720px;
}
.item{
    margin: 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-text);
}
.item .title{
    font-size: 16px;
    font-weight: 500;
    opacity: .78;
}
select{
    outline: none;
    min-width: 192px;
    font-weight: 600;
    border: none;
    padding: 8px 12px 8px 12px;
    border-radius: 8px;
    color: var(--color-text);
    background: var(--color-secondary-bg);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    option{
       color:#335eea;
       background: #eaeffd;
    }
}
.colorStyle{
  color:#335eea;
  background: #eaeffd;
}
button{
    color: var(--color-text);
    background: var(--color-secondary-bg);
    padding: 8px 12px 8px 12px;
    font-weight: 600;
    border-radius: 8px;
    transition: .2s;
    border: none;
    cursor: pointer
}
button, select {
    font-family: inherit;
}
.toggle{
    margin: auto;
}
.toggle input{
    opacity: 0;
    position: absolute;
}
.toggle input+label{
    position: relative;
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: .4s ease;
    height: 32px;
    width: 52px;
    background: var(--color-secondary-bg);
    border-radius: 8px;
}
.toggle input:checked+label:before {
    background: var(--color-primary);
    transition: width .2s cubic-bezier(0,0,0,.1);
}
.toggle input+label:before {
    content: "";
    position: absolute;
    display: block;
    transition: .2s cubic-bezier(.24,0,.5,1);
    height: 32px;
    width: 52px;
    top: 0;
    left: 0;
    border-radius: 8px;
}
.toggle input:checked+label:after {
    left: 26px;
}
.toggle input+label:after {
    content: "";
    position: absolute;
    display: block;
    box-shadow: 0 0 0 1px rgba(0, 0, 0,.2),
     0 4px 0 0 rgba(0, 0, 0, .1),
     0 4px 9px rgba(0, 0, 0 ,.8),
     0 3px 3px rgba(0 ,0 ,0 , .3);
    transition: .35s cubic-bezier(.54,1.6,.5,1);
    background: #fff;
    height: 20px;
    width: 20px;
    top: 6px;
    left: 6px;
    border-radius: 6px;
}
</style>
